import 'package:flutter/material.dart';
import '../../api/list_shape.dart';
import '../../definitions/color.dart';
import '../../definitions/system_aud.dart';
import '../../model/shape.dart';
import '../../widgets/choice_question_practice.dart';
import '../../widgets/shape_practice_option_card.dart';
import '../../wrappers/safe-area.dart';

class ShapePracticePage extends StatefulWidget {
  const ShapePracticePage({super.key});

  @override
  State<ShapePracticePage> createState() => _ShapePracticePageState();
}

class _ShapePracticePageState extends State<ShapePracticePage> {
  List<ShapeInfo> shapeList = [];

  void loadData() {
    listShape().then((res) {
      setState(() {
        shapeList = res;
      });
    });
  }

  @override
  void initState() {
    super.initState();
    loadData();
  }

  @override
  Widget build(BuildContext context) {
    return SafeAreaPageWrapper(
        padding: EdgeInsets.all(12),
        child: shapeList.isEmpty
            ? Center(
                child: Text('数据加载中'),
              )
            : ChoiceQuestionPractice<ShapeInfo>(
                totalOptions: shapeList,
                tip: Text(
                  '请选出你听到的形状',
                  style: TextStyle(fontSize: 22),
                ),
                tipAud: SystemAud.shapePracticeQuestion.value,
                renderQuestion:
                    (ShapeInfo answer, List<ShapeInfo> options, bool hasFocus) {
                  return Text(
                    '请选择${answer.value}（${answer.pinYin}）',
                    style: TextStyle(
                        color: hasFocus ? SchemeColor.seedColor.value : null,
                        fontFamily: 'PinYin',
                        fontSize: 22),
                  );
                },
                renderOption: (ShapeInfo option, bool hasFocus) {
                  return Container(
                    alignment: Alignment.center,
                    child: ShapePracticeOptionCard(
                      shape: option,
                      hasFocus: hasFocus,
                    ),
                  );
                },
                getQuestionAud: (ShapeInfo answer, List<ShapeInfo> options) {
                  return answer.aud;
                },
              ));
  }
}
